<template>
    <div id="CommentCom">
        <!-- 评论区 -->
        <div
                class="person-main-Ccomment"
                v-for="(item,index) in blogComment"
                :key="item.id"
        >
            <!--      头像-->
            <img :src="item.user.avatar" alt="" @click="$router.push('/person/' + item.user.id)"/>
            <div>
                <!--        用户名-->
                <p v-html="item.user.username" @click="$router.push('/person/' + item.user.id)"></p>
                <!--        内容-->
                <p v-html="comContent(item) + item.content"></p>
                <!--        二级评论-->
                <p>
                    <span><el-icon><Pointer/></el-icon>&nbsp;点赞</span>
                    <span @click="showCommentEdit(item,index)">
            <el-icon><ChatDotRound/></el-icon>&nbsp;回复

                        <!--              <el-popover-->
                        <!--                  popper-class="commentCom-el-popover"-->
                        <!--                  :ref="`popover-commend`"-->
                        <!--                  placement="bottom"-->
                        <!--                  :width="500"-->
                        <!--                  trigger="click"-->
                        <!--                  style="transform: translateX(600px)"-->
                        <!--              >-->
                        <!--                <template #reference>-->
                        <!--                  <span>回复</span>-->
                        <!--                </template>-->
                        <!--                <textarea class="commentCom-el-popover-input" v-model="messageContent" :placeholder="'回复' + item.user.username"/>-->
                        <!--&lt;!&ndash;                评论回复&ndash;&gt;-->
                        <!--                <el-icon><Promotion @click="sendMessage(index,item.user.id)" /></el-icon>-->
                        <!--              </el-popover>-->

          </span>
                </p>
                <p v-if="item.messageList" class="children-item">
                    <comment-com :blogComment="item.messageList" :commentUser="item.user"></comment-com>
                    <!-- {{ item.messageList }} -->
                    <!--          <slot name="messageList" :messageList = "item.messageList"></slot>-->
                    <!--          <MessageCom :blog-message="item.messageList"></MessageCom>-->
                </p>
                <!--        删除图标-->
                <!--        v-if="item.user.username == curUser"-->
                <span
                        v-if="item.user.username == curUser"
                        class="comment-message-delIcon"
                        @click="commentDelete(item.id,item.user.username,item.toUser)"
                >
          <svg
                  class="icon"
                  width="200"
                  height="200"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                  data-v-042ca774=""
          >
            <path
                    fill="currentColor"
                    d="M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
            ></path>
            <path
                    fill="currentColor"
                    d="M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
            ></path>
          </svg>
        </span>
            </div>
        </div>

        <el-dialog
                v-model="commentDialogVisible"
                title="回复"
                width="30%"
                align-center
        >
            <textarea class="commentCom-el-popover-input" v-model="messageContent"
                      :placeholder="'回复' + curCommentItem.user.username"/>
            <!--                评论回复-->
            <!--      <el-icon><Promotion @click="sendMessage(curCommentIndex,curCommentItem.user.id)" /></el-icon>-->
            <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" plain @click="commentDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="sendMessage(curCommentItem.commentId || curCommentItem.id,curCommentItem.user.id)">
            回复
          </el-button>
        </span>
            </template>
        </el-dialog>

    </div>
</template>

<script>
// import MessageCom from "@/components/blog/MessageCom";
import {mapState, mapGetters, mapActions, mapMutations} from "vuex";
import {Pointer, ChatDotRound, Promotion} from '@element-plus/icons'
import {ElMessageBox, ElMessage} from 'element-plus'
import request from "@/utils/request";
import {foreMessageSave, foreMessageDelete} from "@/api/blog/message";
import {foreCommentDelete} from "@/api/blog/comment";
import {isEmpty} from "@/utils/judgeNull"
import {getUserName, getUserId} from '@/utils/auth'

export default {
    inject: ['foreBlogLoad'],
    components: {
        // MessageCom
        ElMessageBox,
        ElMessage,
        Pointer,
        ChatDotRound,
        Promotion
    },
    props: {
        blogComment: {
            type: Array,
            default: function () {
                return [];
            },
        },
        commentUser: {
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    data() {
        return {
            curUser: '',
            messageContent: '',
            popoverVisible: false,
            commentDialogVisible: false,
            curCommentItem: {},
            curCommentIndex: -1,
        };
    },
    watch: {
        // currentUser(newVal,oldVal){
        //   this.curUser = newVal
        // }
    },
    computed: {
        // ...mapState("user",["currentUser"]),
    },
    methods: {
        // ...mapGetters("user",["GET_CURRENTUSER"]),
        ...mapMutations('app', ['OPEN_LOGIN']),
        getRegtext(item){
            if(!item.toUser)return"";
            return `&nbsp;&nbsp;&nbsp;&nbsp;@\<a\>${item.toUser.username}\<\/a\>`;
        },
        commentDelete(commentId, name, toUser) {

            let MBox = ElMessageBox.confirm("确认删除?", "警告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
            // 删除回复
            if (toUser && toUser != undefined) {
                MBox.then(() => {
                    foreMessageDelete({id: commentId})
                        .then((res) => {
                            if (res.code == 200 || res.code == 0) {
                                ElMessage({
                                    message: "删除回复成功!",
                                    type: 'success'
                                })
                                this.foreBlogLoad();
                            }
                        });
                })
                return;
            }
            // 删除评论
            MBox.then(() => {

                foreCommentDelete({id: commentId})
                    .then((res) => {
                        if (res.code == 200 || res.code == 0) {
                            ElMessage({
                                message: "删除评论成功!",
                                type: 'success'
                            })
                            this.foreBlogLoad();
                        }
                    });
            });

        },
        sendMessage(commentId, toUserId) {
            console.log("this.curUser", this.curUser)
            if (!this.curUser) {
                // this.$router.push("/login")
                debugger
                this.OPEN_LOGIN();
            }
            //保存回复
            foreMessageSave({
                commentId: commentId,
                toUserId: toUserId,
                username: this.curUser,
                content: this.messageContent
            }).then((res) => {
                if (res.code == 0) {
                    ElMessage({
                        message: "回复成功!",
                        type: 'success'
                    })
                    // let popStr = `popover-${commentId}`
                    // this.$refs.popStr.doClose()
                    this.messageContent = '';
                    this.foreBlogLoad();
                }
            })

            // 备用方案，物理刷新
            // location.reload()
            // this.$refs[`popover-${commentId}`][0].doDestroy()

            this.commentDialogVisible = false
            let pops = this.$refs[`popover-commend`]
            pops.forEach((pop) => {
                console.log("pops", pop)
                pop.popperRef.popperInstanceRef.destroy()
            })
            console.log("pops", pops)
            // this.$refs[`popover-${commentId}`].value.visibility = false
        },

        comContent(item) {
            console.log("this.commentUser",this.commentUser)
            console.log("item",item)
            if (!isEmpty(this.commentUser)) {
                if (this.commentUser.id == item.user.id) return ``
            }
            if (item.toUser) {
                return `回复 <a href="/person/${item.toUser.id}" style="color: #008ac5;text-decoration:none;">@${item.toUser.username}</a> : `
            }
            return ''
        },
        showCommentEdit(item, index) {
            this.commentDialogVisible = true;
            this.curCommentItem = item;
            this.curCommentIndex = index;
        },
    },
    created() {
        this.curUser = getUserName();
    },
    mounted() {
        //
        // this.curUser = this.GET_CURRENTUSER()
        // if(!this.curUser && this.curUser == ''){
        //   this.curUser = JSON.parse(sessionStorage.getItem("user"))
        // }
        this.curUser = getUserName();
    }
};
</script>
<style lang="less" scoped>
@import "../../style/blog/CommentCom.less";
</style>
